
<script lang="ts" setup name="FeatureSet">
import { ref, reactive } from 'vue';
import {
    reqDeleteFeatures,
    reqGetFeatureByFeatureId,
    reqGetFeatureListTree1,
    reqGetFeatureListTree2,
    reqUpdateFeatureByJson,
    reqUpdateFeatureList,
    reqUpdateFeaturesByFile
} from '@/api/feature';
import { successMessage } from '@/utils/message';
import { Feature, Features } from '@/class/map/Feature';

const props = ref({
    label: 'name',
    children: 'zones'
});
const count = ref(1);
const data = ref([]);
const isLoading = ref(false);

const dialogData = reactive({
    dialogTableVisible: false,
    title: '信息',
    info: ''
});

const copy = async () => {
    try {
        await navigator.clipboard.writeText(dialogData.info);
        successMessage('复制成功');
    } catch (message) {
        console.log('复制失败', message);
    }
};

const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
    console.log(data, checked, indeterminate);
};

const loadNode = (node: any, resolve: (data: any[]) => void) => {
    if (node.level === 0) {
        reqGetFeatureListTree1(node.level + 1, '').then((result) => {

            const firstLevelList = result.data;
            const config = firstLevelList.map((item: any, i: number) => ({
                name: item.featuresName,
                data: new Features(item)
            }));
            resolve(config);

        });
    } else {
        reqGetFeatureListTree2(node.level + 1, node.data.data.id).then((result) => {

            const featureList = result.data;
            const config = featureList.map((tempData: any, i: number) => ({
                name: `${tempData.name}{id:${tempData.id},level=${node.level}}`,
                data: new Feature(tempData)
            }));
            resolve(config);

        });
    }
};

const updateFeature = () => {
    try {
        const json = JSON.parse(dialogData.info);
        reqUpdateFeatureByJson(json).then((result) => {

            successMessage('更新成功');

        }).catch((message) => {
            console.log('更新失败', message);
        });
    } catch (error) {
        console.log('JSON 解析错误', error);
    }
};

const updateFeatureList = () => {
    isLoading.value = true;
    reqUpdateFeatureList().then((result) => {

        successMessage('列表更新成功');

        isLoading.value = false;
    }).catch(() => {
        isLoading.value = false;
    });
};

const remove = async (node: any, data: any) => {
    const reqData = { level: node.level - 1, id: data.data.featureId || data.data.id };
    node.visible = false;
    isLoading.value = true;
    const result = await reqDeleteFeatures(reqData);

    successMessage('删除成功');

    isLoading.value = false;
};

const getInfo = (node: any, data: any) => {
    isLoading.value = true;
    reqGetFeatureByFeatureId(data.data.featureId).then((result) => {
        dialogData.info = JSON.stringify(result.data);
        dialogData.dialogTableVisible = true;
        isLoading.value = false;

    });
};

const addJsonFile = (event: Event) => {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
        const fromData = new FormData();
        fromData.append('file', target.files[0]);
        isLoading.value = true;
        reqUpdateFeaturesByFile(fromData).then((result) => {

            successMessage('更新成功');

            isLoading.value = false;
        }).catch((message) => {
            console.log('失败', message);
        });
    }
};
</script>

<template>

    添加数据：<i class="el-icon-loading" v-if="isLoading"></i>
    <input type="file" accept=".json" @click="(e: Event) => (e.target as HTMLInputElement).value = ''"
        @change="addJsonFile" />
    <el-button @click="updateFeatureList">更新列表</el-button>
    <el-tree :props="props" :load="loadNode" @check-change="handleCheckChange" :data="data"
        :expand-on-click-node="false">
        <template #default="{ node, data }">
            <div class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                        <el-button size="mini" type="text" @click="remove(node, data)">删除</el-button>
                        <el-button size="mini" type="text" @click="getInfo(node, data)"
                            v-if="(node.data.data instanceof Feature)">查询</el-button>
                </span>
            </div>
        </template>
    </el-tree>
    <el-dialog :title="dialogData.title" v-model="dialogData.dialogTableVisible">
        <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="dialogData.info"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="copy">复制</el-button>
                <el-button @click="updateFeature">更新</el-button>
                <el-button @click="dialogData.dialogTableVisible = false">确 定</el-button>
            </div>
        </template>
    </el-dialog>

</template>


<style></style>